<template>
  <div class="bottom-con" :class="{'lamp-overview': isOverView}">
    <div class="lamp-status">
      <div class="status"
           v-for="item in lampStatusList"
           :style="{'--color': item.color}">
<!--       <div></div>-->
        <img :src="isOverView ? item.url : item.url2" />
        {{ item.name }}
      </div>
    </div>
    <div class="time">
      <span>
        光照感应开启时间：{{ startTime }} &nbsp;&nbsp;&nbsp;&nbsp;
        光照感应关闭时间：{{ endTime }} &nbsp;&nbsp;&nbsp;&nbsp;
        铁路调度数据连接状态：{{autoStatusData.DATABASEFLAG ? '异常' : '正常'}}
      </span>
      <span style="cursor: pointer" @click="setTimeHandle">
        <img src="@/assets/images/img-icon8.svg" width="20"/>设置
      </span>
    </div>
    <div class="status-btn">
      <div class="item " :class=" autoflag ? 'network-def' : 'network-danger' ">
        <img src="@/assets/images/img-icon21.svg"/>
        {{ autoflag ? '自动开启' : '自动关闭' }}
      </div>
      <div class="item" @click="onSiteInspectionHandle">
        <img src="@/assets/images/img-icon22.svg"/>
        <span>光照强度</span>
      </div>
      <div class="item" @click="statusShow = !statusShow">
        自动巡检
        <img v-if="statusShow" src="@/assets/images/img-icon23.svg"/>
        <img v-else src="@/assets/images/img-icon24.svg"/>
      </div>
    </div>
  </div>
  <div class="status-box" v-show="statusShow">
    <div class="name">状态栏</div>
    <div class="list scrollBar">
      <div v-for="item in statusList" :class="{'danger': item.gatewayPowerAbnormal == '异常'}">
        {{ item.gatewayName }}： {{ item.gatewayPowerAbnormal == '异常' ? '巡检灯具功率异常' : '巡检灯具功率正常' }}
      </div>
    </div>
  </div>

  <on-site-inspection ref="onSiteInspection"></on-site-inspection>
  <set-time ref="setTime" @setTimeOk="setTimeOk"></set-time>
</template>

<script>
import icon3 from '../../assets/images/img-icon3.svg';
import icon4 from '../../assets/images/img-icon4.svg';
import icon5 from '../../assets/images/img-icon5.svg';
import icon6 from '../../assets/images/img-icon6.svg';
import icon7 from '../../assets/images/img-icon7.svg';
import icon33 from '../../assets/images/img-icon33.svg';
import icon34 from '../../assets/images/img-icon34.svg';
import icon35 from '../../assets/images/img-icon35.svg';
import icon36 from '../../assets/images/img-icon36.svg';
import OnSiteInspection from "./modules/onSiteInspection.vue";
import SetTime from "./modules/setTime.vue";
import {AutoStatus, refreshGatewayData} from "../../router/api.js";
import {mapGetters} from "vuex";
export default {
  name: "bottomContent",
  computed: {
    ...mapGetters(['onSiteList','refreshFlag','wait','userInfo','currentMenu']),
  },
  components: {SetTime, OnSiteInspection},
  data() {
    return {
      lampStatusList: [
        {name: '正常开启', status: '1', color: '#1AC963', url: icon6, url2: icon36, },
        // {name: '灯具故障', status: '2', color: '#C41A20', url: icon3, url2: icon33, },
        {name: '灯具维修', status: '3', color: '#FF9B05', url: icon4, url2: icon34, },
        {name: '灯具未开启', status: '4', color: '#424343', url: icon5, url2: icon35, },
        {name: '灯具朝下', status: '5', color: '#424343', url: icon7, url2: icon7, },
      ],
      isOverView: false,
      statusList: [],
      statusShow: true,
      startTime: '',
      endTime: '',
      autoflag: true,
      timer: null,
      fetchingFlag: true,
      autoStatusData: {}
    }
  },
  watch: {
    '$route.path': {
      deep: true,
      immediate: true,
      handler(n) {
        this.isOverView = n === '/' ? true : false;
      }
    },
    'onSiteList': {
      deep: true,
      handler(n) {
        this.statusList = n;

        if(this.currentMenu == 1 || this.currentMenu == 2 || this.currentMenu == 3){
          this.statusList = n[this.currentMenu]
        }else{
          let tmp = [];
          for(let arr in n){
            tmp = [...tmp, ...n[arr]];
          }
          this.statusList = tmp;
        }
      }
    },
    'wait': {
      deep: true,
      handler(n) {
        if(n) {
          clearInterval(this.timer);
          this.init();
        }
      }
    },
  },
  created() {
    this.statusShow = this.userInfo.role == 2 ? true : false;
    this.init()

    this.timer = setInterval(() => {
      if(this.$route.path == '/login'){
        clearInterval(this.timer);
        this.timer = null;
        this.fetchingFlag = false;
      }
      if(this.fetchingFlag){
        this.init()
      }
    }, 1000 * 5)

  },
  unmounted() {
    clearInterval(this.timer);
    this.timer = null;
    this.fetchingFlag = false;
  },
  methods:{
    init(){
      this.fetchingFlag = true;
      AutoStatus().then(res => {
        if(res && res.data.code == 200){
          let data = JSON.parse(res.data.data);
          this.startTime = data.cronExpressionStart;
          this.endTime = data.cronExpressionEnd;
          this.autoflag = data.autoflag
          this.autoStatusData = data;
          this.$store.commit('SET_AUTOSTATUSDATA', data);
          this.$store.commit('SET_WAIT', false)
        }
      })
    },
    setTimeHandle(){
      if(this.userInfo.role != 3){
        this.$refs.setTime.show();
      }
    },
    setTimeOk(data){
      // let s = data.startTime.split(' ');
      // let st = s[1].split(':');
      // let e = data.endTime.split(' ');
      // let et = s[1].split(':');
      //
      // this.startTime = s[0]+ ' '+st[0]+':'+st[1];
      // this.endTime = e[0]+ ' '+et[0]+et[1];

      clearInterval(this.timer);
      this.init();
    },
    onSiteInspectionHandle(){
      this.$refs.onSiteInspection.show();
    },
  }
}
</script>

<style scoped lang="scss">
.bottom-con {
  width: calc(100% - 70px);
  height: 56px;
  position: absolute;
  bottom: 10px;
  z-index: 9;
  background: url("@/assets/images/img-bottom.png") no-repeat left top;
  background-size: 100% 100%;
  display: flex;
  justify-content: flex-end;

  .lamp-status {
    width: calc(30% - 20px);
    display: flex;
    justify-content: space-between;
    padding-top: 13px;

    .status {
      font-size: 16px;
      font-weight: 400;
      color: #366;
      position: relative;

      &:last-child {
        margin-right: 0;
      }

      img{
        width: 20px;
        height: 20px;
        margin-right: 4px;
        vertical-align: sub;
      }

      div {
        padding: 3px;
        border: 1px solid var(--color);
        //border: 1px solid #3C96C2;
        border-radius: 50%;
        width: 12px;
        height: 12px;
        position: absolute;
        top: 2px;
        left: -30px;

        &:before {
          content: '';
          width: 14px;
          height: 14px;
          background-color: var(--color);
          border-radius: 50%;
          display: inline-block;
          position: absolute;
          top: 2px;
          left: 2px;
        }
      }
    }
  }

  .time {
    width: calc(40% - 80px);
    font-size: 18px;
    font-weight: 400;
    padding: 13px 10px 0 70px;
    color: #fff;
    display: flex;
    justify-content: space-between;

    img {
      vertical-align: sub;
      margin-right: 5px;
    }
  }

  .status-btn {
    width: 30%;
    display: flex;
    color: #fff;
    padding: 6px 0;
    position: relative;

    .item {
      width: 33%;
      height: calc(100% - 12px);
      line-height: 44px;
      text-align: center;
      background: url("@/assets/images/img-status-def.svg") no-repeat left top;
      background-size: 100% 100%;
      position: absolute;
      cursor: pointer;
      user-select: none;

      &:nth-child(1) {
        left: 4%;
      }

      &:nth-child(2) {
        left: 34%;
        transform: rotateX(180deg);

        span {
          transform: rotateX(-180deg);
          display: inline-block;
        }
      }

      &:nth-child(3) {
        left: 64%;
      }

      &:hover, &.on {
        background: url("@/assets/images/img-status-on.svg") no-repeat left top;
        background-size: 100% 100%;
      }

      &.network-danger {
        background: url("@/assets/images/network-dan.svg") no-repeat left top;
        background-size: 100% 100%;
      }

      &.network-def {
        background: url("@/assets/images/network-def.svg") no-repeat left top;
        background-size: 100% 100%;
      }

      img {
        width: 20px;
        vertical-align: sub;
        margin-right: 6px;
      }
    }
  }
}

.status-box {
  width: 551px;
  height: 456px;
  background: url("@/assets/images/img-status-bg2.png") no-repeat left top;
  background-size: 100% 100%;
  position: fixed;
  bottom: 66px;
  right: 36px;
  z-index: 9;

  .name {
    height: 34px;
    font-size: 16px;
    font-weight: 400;
    color: #004246;
    line-height: 34px;
    padding-left: 42px;
  }

  .list {
    height: calc(100% - 125px);
    font-size: 16px;
    font-weight: 400;
    color: #366;
    padding-left: 54px;
    padding-top: 24px;
    overflow: auto;

    div {
      margin-bottom: 20px;
      position: relative;
    }

    .danger {
      &:before {
        content: '';
        width: 40px;
        height: 40px;
        background: url("@/assets/images/img-icon20.svg") no-repeat left top;
        background-size: 100% 100%;
        position: absolute;
        left: -40px;
        top: -5px;
      }
    }
  }
}

.lamp-overview {
  .lamp-status {
    .status {
      div {
        border-color: #D4EDFC;
      }
    }
  }
}

.page-box {
  .lamp-status {
    display: none;
  }
}
</style>
